<template>
  <div class="about-page sm:pt-16 pt-12">
    <!-- 页面标题 -->
    <div class="bg-[#E30314] from-teal-600 to-teal-800 text-white py-16">
      <div class="container mx-auto px-4">
        <h1 class="text-4xl md:text-5xl font-bold text-center mb-4">
          {{ pageHeader.title }}
        </h1>
        <p class="text-xl text-center opacity-90">{{ pageHeader.subtitle }}</p>
      </div>
    </div>

    <!-- 公司简介 -->
    <section class="sm:py-16 py-4 bg-white">
      <div class="container px-4">
        <div class="w-full">
          <div class="sm:mb-12 mb-6 text-center">
            <h2
              class="text-3xl md:text-4xl font-bold text-center text-gray-800">
              {{ companyIntro.title }}
            </h2>
            <span class="text-2xl font-bold">{{ companyIntro.subtitle }}</span>
          </div>
          <div class="grid md:grid-cols-2 gap-8 items-center">
            <div class="space-y-6">
              <p
                v-for="(desc, index) in companyIntro.description"
                :key="index"
                class="sm:text-lg text-[14px] text-gray-700 leading-relaxed">
                {{ desc }}
              </p>
            </div>
            <div class="bg-[#fdf0f1] p-8 rounded-lg">
              <div class="grid grid-cols-2 gap-6">
                <div
                  v-for="(stat, index) in companyIntro.statistics"
                  :key="index"
                  class="text-center">
                  <div class="text-3xl font-bold mb-2" :class="stat.color">
                    {{ stat.number }}
                  </div>
                  <div class="text-sm text-gray-600">
                    {{ stat.description }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 炽焰运动组织架构 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="w-full mx-auto">
          <div class="sm:mb-12 mb-6 text-center">
            <h2
              class="text-3xl md:text-4xl font-bold text-center text-gray-800">
              {{ organizationStructure.title }}
            </h2>
            <span class="text-2xl font-bold">{{
              organizationStructure.subtitle
            }}</span>
          </div>
          <div class="structure-swiper-container">
            <swiper
              :modules="[SwiperNavigation]"
              :slides-per-view="1.5"
              :space-between="30"
              :breakpoints="{
                640: { slidesPerView: 2, spaceBetween: 20 },
                768: { slidesPerView: 3, spaceBetween: 30 },
                1024: { slidesPerView: 4, spaceBetween: 40 },
              }"
              class="structure-swiper">
              <swiper-slide
                v-for="(department, index) in organizationStructureData"
                :key="index">
                <div
                  class="structure-card"
                  :class="`structure-card-${index + 1}`">
                  <div class="text-center mb-4">
                    <div class="text-3xl mb-2">{{ department.icon }}</div>
                    <h3
                      class="text-xl font-bold mb-2"
                      :class="department.titleColor">
                      {{ department.name }}
                    </h3>
                  </div>
                  <div class="space-y-3 text-sm text-gray-700">
                    <div
                      v-for="(dept, deptIndex) in department.departments"
                      :key="deptIndex"
                      class="flex items-center">
                      <div
                        class="w-2 h-2 rounded-full mr-3"
                        :class="department.dotColor"></div>
                      <span>{{ dept }}</span>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </section>

    <!-- 业务覆盖 -->
    <section class="sm:py-16 py-4 bg-white">
      <div class="container px-4">
        <div class="w-full">
          <div class="sm:mb-12 mb-6 text-center">
            <h2
              class="text-3xl md:text-4xl font-bold text-center text-gray-800">
              {{ businessCoverage.title }}
            </h2>
            <span class="text-2xl font-bold">{{
              businessCoverage.subtitle
            }}</span>
          </div>
          <div class="grid md:grid-cols-2 gap-8">
            <div class="grid sm:grid-cols-2 gap-8">
              <div
                v-for="(item, index) in businessCoverageData"
                :key="index"
                class="coverage-card">
                <div class="text-4xl font-bold text-teal-600 mb-4">
                  <span class="text-4xl font-bold text-[#E30314] mb-4">
                    {{ item.number }}
                  </span>
                  <span class="text-gray-600 text-sm">{{ item.title }}</span>
                </div>
                <div class="text-gray-600 text-sm">{{ item.description }}</div>
              </div>
            </div>
            <div class="rounded-lg">
              <img
                src="@/assets/1.jpg"
                class="rounded-lg object-cover"
                alt=""
                srcset="" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 发展历程 Swiper 横向错位 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="w-full mx-auto">
          <div class="sm:mb-12 mb-6 text-center">
            <h2
              class="text-3xl md:text-4xl font-bold text-center text-gray-800">
              {{ timeline.title }}
            </h2>
            <span class="text-2xl font-bold">{{ timeline.subtitle }}</span>
          </div>
          <div class="timeline-swiper-container">
            <swiper
              :modules="[SwiperNavigation]"
              :slides-per-view="1.5"
              :space-between="30"
              :navigation="true"
              :breakpoints="{
                640: { slidesPerView: 2, spaceBetween: 20 },
                768: { slidesPerView: 3, spaceBetween: 30 },
                1024: { slidesPerView: 4, spaceBetween: 40 },
              }"
              class="timeline-swiper">
              <swiper-slide
                v-for="(year, index) in timelineData"
                :key="index"
                :class="[
                  'timeline-slide',
                  index % 2 === 1 ? 'timeline-slide-alt' : '',
                ]">
                <div class="timeline-card">
                  <div class="year-badge">{{ year.year }}</div>
                  <div class="events-scroll">
                    <div class="events-list">
                      <div
                        v-for="(event, eventIndex) in year.events"
                        :key="eventIndex"
                        class="event-item">
                        <div class="event-dot"></div>
                        <div class="event-text">{{ event }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </section>

    <!-- 企业文化 -->
    <section class="py-16 bg-gray-50">
      <div class="container mx-auto px-4">
        <div class="w-full mx-auto">
          <div class="sm:mb-12 mb-6 text-center">
            <h2
              class="text-3xl md:text-4xl font-bold text-center text-gray-800">
              {{ corporateCulture.title }}
            </h2>
            <span class="text-2xl font-bold">{{
              corporateCulture.subtitle
            }}</span>
          </div>
          <div class="grid md:grid-cols-3 gap-8">
            <div
              v-for="(culture, index) in corporateCultureData"
              :key="index"
              class="bg-white p-8 rounded-lg shadow-md text-center">
              <div class="text-4xl mb-4">{{ culture.icon }}</div>
              <h3 class="text-xl font-bold mb-4 text-gray-800">
                {{ culture.title }}
              </h3>
              <p class="text-gray-600">{{ culture.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 合作品牌 -->
    <section class="sm:py-16 py-8 bg-white">
      <div class="container mx-auto px-4">
        <div class="w-full mx-auto">
          <h2
            class="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-800">
            {{ partnerBrands.title }}
          </h2>
          <p class="text-center text-gray-600 mb-8">
            {{ partnerBrands.description }}
          </p>
          <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
            <div
              v-for="i in partnerBrands.brandCount"
              :key="i"
              class="bg-gray-100 h-20 rounded-lg flex items-center justify-center">
              <span class="text-gray-400 text-sm">品牌{{ i }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 荣誉资质 -->
    <section class="sm:py-16 py-8 bg-white">
      <div class="container mx-auto px-4">
        <div class="w-full mx-auto">
          <h2
            class="text-3xl md:text-4xl font-bold text-center mb-12 text-gray-800">
            {{ honors.title }}
          </h2>
          <div class="">
            <swiper
              :modules="[SwiperNavigation]"
              :slides-per-view="1.5"
              :space-between="30"
              :breakpoints="{
                640: { slidesPerView: 2, spaceBetween: 20 },
                768: { slidesPerView: 3, spaceBetween: 30 },
                1024: { slidesPerView: 4, spaceBetween: 40 },
              }"
              class="honor-swiper">
              <swiper-slide
                v-for="(honor, index) in honorsData"
                :key="index"
                :virtualIndex="index">
                <div class="bg-gray-50 sm:p-6 p-3 rounded-lg honor-card">
                  <img
                    src="@/assets/1.jpg"
                    alt="honor image"
                    class="w-20 h-20 object-cover mx-auto rounded-full mb-4 honor-img" />
                  <div class="text-lg font-bold text-[#E30314] mb-1">
                    {{ honor.name }}
                  </div>
                  <div class="text-sm text-gray-500 mb-2">{{ honor.year }}</div>
                  <div class="text-gray-600 text-sm">{{ honor.desc }}</div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Navigation } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import { aboutConfig } from "@/config/about.js";

const SwiperNavigation = Navigation;

// 从配置文件获取数据
const {
  pageHeader,
  companyIntro,
  organizationStructure,
  businessCoverage,
  timeline,
  corporateCulture,
  partnerBrands,
  honors,
} = aboutConfig;

// 获取发展历程数据
const timelineData = timeline.years;

// 获取组织架构数据
const organizationStructureData = organizationStructure.departments;

// 获取业务覆盖数据
const businessCoverageData = businessCoverage.coverage;

// 获取企业文化数据
const corporateCultureData = corporateCulture.culture;

// 获取荣誉资质数据
const honorsData = honors.honors;
</script>

<style scoped>
.about-page {
  min-height: 100vh;
  overflow: hidden;
}

/* 时间线样式 */
.timeline-swiper-container {
  position: relative;
  padding: 0 20px;
  :deep(.swiper) {
    overflow: visible;
  }
}
.timeline-swiper {
  padding: 20px 0;
}
.timeline-slide {
  height: auto;
  display: flex;
  align-items: flex-start;
}
.timeline-slide-alt {
  margin-top: 60px;
}
.timeline-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  height: 340px;
  border: 1px solid #e2e8f0;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}
.timeline-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  border-color: #E30314;
}
.year-badge {
  color: #E30314;
  font-size: 2rem;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 16px;
}
.events-scroll {
  flex: 1;
  overflow-y: auto;
}
.events-scroll::-webkit-scrollbar {
  width: 6px;
}
.events-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}
.events-scroll::-webkit-scrollbar-thumb {
  background: #f8e6e8;
  border-radius: 4px;
}
.events-scroll::-webkit-scrollbar-thumb:hover {
  background: #f8e6e8;
}
.events-scroll::-webkit-scrollbar-button {
  display: none;
}
.events-list {
  padding-right: 8px;
}
.event-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  position: relative;
}
.event-item:last-child {
  margin-bottom: 0;
}
.event-dot {
  width: 8px;
  height: 8px;
  background: #E30314;
  border-radius: 50%;
  margin-top: 8px;
  margin-right: 12px;
  flex-shrink: 0;
}
.event-text {
  color: #374151;
  font-size: 0.875rem;
  line-height: 1.5;
  flex: 1;
}

:deep(.swiper-button-prev) {
  left: 0;
}
:deep(.swiper-button-next) {
  right: 0;
}

:deep(.swiper-button-next),
:deep(.swiper-button-prev) {
  color: #fff;
  background: #E30314;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
:deep(.swiper-button-next:hover),
:deep(.swiper-button-prev:hover) {
  background: #E30314;
  color: white;
}
:deep(.swiper-button-next::after),
:deep(.swiper-button-prev::after) {
  font-size: 16px;
}
:deep(.swiper-pagination-bullet) {
  background: #0d9488;
  opacity: 0.3;
}
:deep(.swiper-pagination-bullet-active) {
  opacity: 1;
}
@media (max-width: 768px) {
  .timeline-swiper-container {
    padding: 0 5px;
  }
  .timeline-card {
    padding: 12px;
    height: 260px;
  }
  .year-badge {
    font-size: 1.1rem;
    padding: 6px 10px;
  }
  .event-text {
    font-size: 0.8rem;
  }
  .timeline-slide-alt {
    margin-top: 30px;
  }
  .events-scroll::-webkit-scrollbar {
    width: 4px;
  }
}

/* 组织架构样式 */
.structure-swiper-container {
  position: relative;
  padding: 0 20px;
}
.structure-swiper {
  padding: 20px 0;
}
.structure-card {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-radius: 12px;
  padding: 24px;
  height: 280px;
  border: 1px solid #e2e8f0;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
}
.structure-card-1 {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
}
.structure-card-2 {
  background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
}
.structure-card-3 {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
}
.structure-card-4 {
  background: linear-gradient(135deg, #f0fdf4 0%, #bbf7d0 100%);
}
.structure-card-5 {
  background: linear-gradient(135deg, #eff6ff 0%, #bfdbfe 100%);
}
.structure-card-6 {
  background: linear-gradient(135deg, #faf5ff 0%, #ddd6fe 100%);
}
.structure-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* 业务覆盖样式 */
.container-yw {
  background: url("../assets/activity-bg.jpg") no-repeat center center;
  background-size: cover;
}
.coverage-swiper-container {
  position: relative;
  /* padding: 0 20px; */
}
.coverage-swiper {
  padding: 20px 0;
  width: 50%;
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
.coverage-card {
  border-radius: 6px;
  padding: 24px;
  border-bottom: 1px solid #E30314;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-5px);
}
.coverage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  border-color: #E30314;
}
@media screen and (max-width: 768px) {
  .coverage-swiper {
    width: 100%;
  }
  .coverage-card {
    width: 100%;
  }
}
</style>
